<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>  </title>
<link href="__ROOT__/Lib/ORG/style/css/base.css" rel="stylesheet" type="text/css" />
<link href="__ROOT__/Lib/ORG/style/css/demo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h2>示例1：基础演示</h2>
<table width="700" border="0" cellspacing="0" cellpadding="0" class="tab1">
  <tr>
  	<td>国家</td>
  	<td><select  class="ld-select-1" name="country">
    		<option value="">请选择</option>
    	</select>
    
    </td>
    <td>省份</td>
    <td><select  class="ld-select-1" name="province">
    		<option value="">请选择</option>
    	</select>
    </td>
    <td>城市</td>
    <td><select class="ld-select-1" name="city">
    		<option value="">请选择</option>
    	</select>
    </td>
  </tr>
</table>


<h2>示例2：事件演示</h2>
<ul class="clearfix selects_list">
	<li class="l">
    	<div class="select-column">
          <select class="ld-select-5" name="province3" width="100">
                <option value="">请选择</option>
            </select>      
        </div>    
    </li>
	<li class="l">
    	<div class="select-column">
           <select class="ld-select-5" name="city3" width="100" style="display:none;">
                    <option value="">请选择</option>
                </select>    
        </div>     
    </li>     
</ul>
<div id="log">

</div>


<script src="__ROOT__/Lib/ORG/js/jquery-1.6.1.min.js"></script>
<script src="__ROOT__/Lib/ORG/js/jquery.ld.js"></script>
<script type="text/javascript">
$(function(){
	//示例1
	$(".ld-select-1").ld({ajaxOptions : {"url" : "__ROOT__/Lib/ORG/get_region.php"},
						  style : {"width" : 120}
	                     });
	                     
	//示例5
	var $ld5 = $(".ld-select-5");					  
	$ld5.ld({ajaxOptions : {"url" : "__ROOT__/Lib/ORG/get_region.php"},
	                      defaultParentId : 1,
						  style : {"width" : 120}
	                     })	 
	var ld5_api = $ld5.ld("api");
	//监听change事件	
	$ld5.bind("change",onchange);
	//当最后一个选择框加载完数据后触发
	$ld5.eq(2).bind("afterLoad.ld",afterLoad);
	
	function onchange(e){
		var $target = $(e.target);
		var index = $ld5.index($target);
		index ++;
		$ld5.eq(index).show();
		
		logEvent(e);
	}
	
	function afterLoad(e){
		logEvent(e);
	}
	// 打印事件
	function logEvent(event) {
		var s = '事件：'+event.type; 
		// 向面板添加新的消息
		$('#log').append('<p>'+s+'</p');
	}
})
</script>
</body>
</html>